<template>
  <el-drawer
    :visible.sync="visible"
    direction="rtl"
    size="720px"
    destroy-on-close
  >
    <div slot="title">
      {{title || '位置'}}
    </div>
    <map-view
      :style="{ width: '100%', height: '80%' }"
      @init="onMapInit"
    />

    <div v-if="address" style="margin-top: 8px">
      地址：{{address}}
    </div>
  </el-drawer>
</template>

<script>
import MapView from './MapView';

export default {
  components: {
    MapView
  },
  data() {
    return {
      visible: false,
      title: '',
      address: null,
    };
  },
  methods: {
    show(options) {
      this.visible = true;
      this.title = options.title;
      this.address = options.address;
      this.onAfterMapInit = () => {
        const { point } = options;
        this.addOneMarker(new BMap.Point(point.lng, point.lat));
      };
    },
    onMapInit({ map }) {
      this.map = map;
      //先根据ip快速定位到当前城市
      new BMap.LocalCity().get(result => {
        var point = new BMap.Point(result.center.lng, result.center.lat);
        map.centerAndZoom(point, result.level);
        this.onAfterMapInit && this.onAfterMapInit();
      });
    },
    addOneMarker(point) {
      let map = this.map;
      map.clearOverlays();
      const marker = new BMap.Marker(point);
      map.addOverlay(marker);
      map.panTo(point, {noAnimation: true});
      //跳动
      marker.setAnimation(BMAP_ANIMATION_BOUNCE);
      setTimeout(() => {
        marker.setAnimation(null);
      }, 3000);
    }
  }
}
</script>

<style scoped>
>>> .el-drawer__body {
  padding: 8px;
}
</style>